<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="script.js" type="module" defer></script>
    <link rel="stylesheet" href="styles.css" />
    <title>Noughts and Crosses</title>
  </head>
  <body>
    <div class="main">
      <div class="play-area">
        <div class="menu">
          <div class="menu__wrapper"></div>
        </div>
        <div class="play-area__grid">
          <div class="play-area__boxes"></div>
          <div class="play-area__boxes"></div>
          <div class="play-area__boxes"></div>
          <div class="play-area__boxes"></div>
          <div class="play-area__boxes"></div>
          <div class="play-area__boxes"></div>
          <div class="play-area__boxes"></div>
          <div class="play-area__boxes"></div>
          <div class="play-area__boxes"></div>
        </div>
      </div>
      <div class="score-bar" style="visibility: visible">
        <button class="score-bar__color-switcher color-switcher">
          <svg
            class="color-switcher__item item--moon"
            viewBox="0 0 24 24"
            fill="none"
          >
            <g>
              <path
                d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
            </g>
          </svg>
          <svg
            class="color-switcher__item item--sun"
            viewBox="0 0 24 24"
            fill="none"
          >
            <g>
              <circle cx="12" cy="12" r="5" stroke-width="1.5"></circle>
              <path
                d="M12 2V4"
                stroke-width="1.5"
                stroke-linecap="round"
              ></path>
              <path
                d="M12 20V22"
                stroke-width="1.5"
                stroke-linecap="round"
              ></path>
              <path
                d="M4 12L2 12"
                stroke-width="1.5"
                stroke-linecap="round"
              ></path>
              <path
                d="M22 12L20 12"
                stroke-width="1.5"
                stroke-linecap="round"
              ></path>
              <path
                d="M19.7778 4.22266L17.5558 6.25424"
                stroke-width="1.5"
                stroke-linecap="round"
              ></path>
              <path
                d="M4.22217 4.22266L6.44418 6.25424"
                stroke-width="1.5"
                stroke-linecap="round"
              ></path>
              <path
                d="M6.44434 17.5557L4.22211 19.7779"
                stroke-width="1.5"
                stroke-linecap="round"
              ></path>
              <path
                d="M19.7778 19.7773L17.5558 17.5551"
                stroke-width="1.5"
                stroke-linecap="round"
              ></path>
            </g>
          </svg>
        </button>
        <p>Score:</p>
        <div class="score-bar__section names">
          <div class="names__signs crosses">
            <p>
              <svg style="stroke: none" viewBox="0 0 25 25">
                <g fill-rule="evenodd">
                  <g transform="translate(-467.000000, -1039.000000)">
                    <path
                      d="M489.396,1061.4 C488.614,1062.18 487.347,1062.18 486.564,1061.4 L479.484,1054.32 L472.404,1061.4 C471.622,1062.18 470.354,1062.18 469.572,1061.4 C468.79,1060.61 468.79,1059.35 469.572,1058.56 L476.652,1051.48 L469.572,1044.4 C468.79,1043.62 468.79,1042.35 469.572,1041.57 C470.354,1040.79 471.622,1040.79 472.404,1041.57 L479.484,1048.65 L486.564,1041.57 C487.347,1040.79 488.614,1040.79 489.396,1041.57 C490.179,1042.35 490.179,1043.62 489.396,1044.4 L482.316,1051.48 L489.396,1058.56 C490.179,1059.35 490.179,1060.61 489.396,1061.4 L489.396,1061.4 Z M485.148,1051.48 L490.813,1045.82 C492.376,1044.26 492.376,1041.72 490.813,1040.16 C489.248,1038.59 486.712,1038.59 485.148,1040.16 L479.484,1045.82 L473.82,1040.16 C472.257,1038.59 469.721,1038.59 468.156,1040.16 C466.593,1041.72 466.593,1044.26 468.156,1045.82 L473.82,1051.48 L468.156,1057.15 C466.593,1058.71 466.593,1061.25 468.156,1062.81 C469.721,1064.38 472.257,1064.38 473.82,1062.81 L479.484,1057.15 L485.148,1062.81 C486.712,1064.38 489.248,1064.38 490.813,1062.81 C492.376,1061.25 492.376,1058.71 490.813,1057.15 L485.148,1051.48 L485.148,1051.48 Z"
                    ></path>
                  </g>
                </g>
              </svg>
            </p>
          </div>
          <p class="names__separator">-</p>
          <div class="names__signs noughts">
            <p>
              <svg viewBox="0 0 22 22">
                <g>
                  <circle
                    cx="11"
                    cy="11"
                    r="10"
                    fill="none"
                    stroke-width="2"
                  ></circle>
                </g>
                <g>
                  <circle
                    cx="11"
                    cy="11"
                    fill="none"
                    r="6"
                    stroke-width="2"
                  ></circle>
                </g>
              </svg>
            </p>
          </div>
        </div>
        <div class="score-bar__section score">
          <p class="score__crosses">0</p>
          <p class="score__noughts">0</p>
        </div>
      </div>
    </div>
  </body>
</html>
